<template>
    <view class="container">
        <view class="header">
            <view class="search-container">
                <img @click="onClick" class="icon" src="../../static/seek@2x.png" alt="" />
                <input
                    type="text"
                    placeholder-class="in-bar"
                    placeholder="书籍名"
                    class="bar"
                    autofocus="true"
                />
                <img class="cancel-img" src="../../static/cancel.png" alt="" />
            </view>
            <view class="cancel" @click="onCancel">取消</view>
        </view>

        <view v-if="searching">
            <view class="history">
                <view class="title">
                    <view class="chunk"></view>
                    <text>历史搜索</text>
                </view>
                <view class="tags">
                    <block>
                        <tag></tag>
                    </block>
                </view>
            </view>

            <view class="history hot-search">
                <view class="title">
                    <view class="chunk"></view>
                    <text>热门搜索</text>
                </view>
                <view class="tags">
                    <block>
                        <tag></tag>
                    </block>
                </view>
            </view>
        </view>

		<view v-if="!searching" class="books-container">
			<block v-for="">
				<book class="book"></book>
			</block>
		</view>
    </view>
</template>

<script>
import book from "@/components/book/book.vue";
export default {
    components: {
        book
    },
    name: "search",
    data () {
        return {
			searching: true
        };
    },
    methods: {
        // 取消搜索面板
        onCancel () {
            // 触发close这个事件
            this.$emit("close")
        },
		onClick (){
			this.searching = false
		}
    }
}
</script>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.header {
    background-color: #ffffff;
    position: fixed;
    height: 100rpx;
    border-top: 1px solid #f5f5f5;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    flex-direction: row;
    width: 750rpx;
    align-items: center;
    z-index: 99;
}

.search-container {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    background-color: #f5f5f5;
    border-radius: 50px;
    margin-left: 20rpx;
}

.in-bar {
    color: #999;
}

.bar {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    display: inline-block;
    height: 68rpx;
    width: 1000rpx;
    font-size: 28rpx;
}

.icon {
    width: 28rpx;
    height: 28rpx;
    margin-left: 24rpx;
    margin-right: 16rpx;
}

.cancel {
    line-height: 68rpx;
    width: 120rpx;
    text-align: center;
    display: inline-block;
    border: none;
}

.cancel-img {
    width: 28rpx;
    height: 28rpx;
    margin-right: 20rpx;
}

.history {
    width: 690rpx;
    margin: 40rpx 0 20rpx 0;
    display: flex;
    font-size: 28rpx;
    margin-top: 160rpx;
    flex-direction: column;
}

.hot-search {
    margin-top: 70rpx;
}

.title {
    line-height: 30rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.books-container v-book {
    margin-bottom: 25rpx;
}

.books-container {
    width: 570rpx;
    margin-top: 100rpx;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0 90rpx 0 90rpx;
    justify-content: space-between;
}

.loading {
    margin: 50rpx 0 50rpx 0;
}

.loading-center {
    position: absolute;
    top: 50%;
    left: 50%;
}

.empty-tip {
    display: inline-block;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
}

.chunk {
    height: 30rpx;
    width: 10rpx;
    background-color: #000;
    display: inline-block;
    margin-right: 20rpx;
}

.tags {
    /* padding-left:15px; */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 24rpx;
    padding-left: 30rpx;
    width: 630rpx;
}

.tags v-tag {
    margin-right: 20rpx;
    margin-bottom: 20rpx;
}

.bar {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    display: inline-block;
    height: 68rpx;
    width: 500rpx;
    font-size: 28rpx;
}
</style>
